<template>
  <div class="role-manager">
    <div>
      <el-button
        @click="$refs.addRole.showDialog = true"
        type="primary"
        icon="el-icon-plus"
        >新增角色</el-button
      >
      <!-- table -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="name" label="角色名"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button @click="showPermission(scope.row.id)" type="text">分配权限</el-button>
            <el-button @click="edit(scope.row.id)" type="text">修改</el-button>
            <el-button @click="del(scope.row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align:center">
        <!-- sync可以让组件内部影响外面这个值，类似于双向绑定的意思 -->
        <el-pagination
          :current-page.sync="page"
          @current-change="loadData"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <add-role ref="addRole" />

    <!-- 分配权限对话框 -->
    <el-dialog title="分配权限" :visible.sync="showPermDialog">
      <!-- show-checkbox显示出多选框 -->
      <!-- check-strictly设置父子不关联，点击父选中不会影响到子 -->
      <!--   
        node-key="id" 如果要设置谁选中，必须加这个属性，给唯一值
        :default-checked-keys="checkedList"  设置默认选中，对应一个数组
       -->
      <el-tree
        v-if="showPermDialog"
        ref="tree"
        :data="treeData"
        :props="props"
        show-checkbox
        default-expand-all
        check-strictly
        node-key="id"
        :default-checked-keys="checkedList"
      >
      </el-tree>
      <div style="text-align:center;">
        <el-button @click="save" type="primary">确定</el-button>
        <el-button @click="showPermDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import { roleListAPI, delRole, roleDetail, assignRolePerm } from '@/api/roles'
import { getPermissionList } from '@/api/permission'

// 导入递归函数
import { arrayToTree } from '@/utils'

// 导入组件
import AddRole from './AddRole.vue'
export default {
  components: {
    AddRole
  },
  data () {
    return {

      props: {
        // 设置tree用哪个属性作为展示文字
        label: 'name',
        // 设置tree用哪个属性作为子节点
        children: 'children'
      },
      // 控制分配权限对话框的显示和隐藏
      showPermDialog: false,
      tableData: [],
      checkedList: [],
      // 跟树绑定的数组
      treeData: [],
      // 页容量
      size: 2,
      // 总数
      total: 0,
      // 页码
      page: 1,
      id: ''
    }
  },

  methods: {
    // 点击确定的事件
    async save () {
      // 1. 拿到选中的权限
      const permIds = this.$refs.tree.getCheckedKeys()
      // 2. 发请求去给这个角色分配权限
      await assignRolePerm({
        id: this.id,
        permIds
      })
      // 弹出成功提示
      this.$message.success('分配权限成功')
      // 把对话框隐藏
      this.showPermDialog = false
    },
    // 分配权限的点击事件
    async showPermission (id) {
      // 把当前被点的角色id存起来
      this.id = id
      // 1. 查出所有的权限列表给对话框去显示
      const res = await getPermissionList()
      // 转成树形结构才能给tree去使用
      this.treeData = arrayToTree(res.data, '0')

      // 2. 根据id查出这个角色所拥有的权限，再把拥有权限默认选中
      const res2 = await roleDetail(id)
      this.checkedList = res2.data.permIds

      // 3. 展示出分配权限对话框
      this.showPermDialog = true
    },
    async edit (id) {
      // 根据id查出角色详情
      const res = await roleDetail(id)
      this.$refs.addRole.showDialog = true
      // 把查出来的数据给form
      this.$refs.addRole.form = res.data
    },
    async del (id) {
      await delRole(id)
      this.$message.success('删除成功')
      // 刷新上一页
      if (this.tableData.length == 1) {
        this.page--
        if (this.page < 1) {
          this.page = 1
        }
      }
      this.loadData()
    },
    // 加载数据的方法
    async loadData () {
      const res = await roleListAPI({
        page: this.page,
        pagesize: this.size
      })
      // 赋值给table
      this.tableData = res.data.rows
      // 保存总数
      this.total = res.data.total
    }
  },

  created () {
    // 调用获取列表的方法
    this.loadData()
  }
}
</script>

<style></style>
